import { useEffect, useState } from 'react'
import axios from 'axios'
import { Input, Checkbox, Button, Table } from 'antd'
import ListItem from '../../components/ListItem'
const App = () => {
	const [list, setList] = useState<any[]>([])
	const [isProfect, setIsProfect] = useState(false)
	const [type, setType] = useState('')
	const [desc, setDesc] = useState('全部')
	const descList = ['默认', '时间', '评价', '收藏']
	const [activeIndex, setActiveIndex] = useState(0)
	const [visbile, setVisile] = useState(false)
	const tabs = [{
		title: 'item-1',
		list: ['数学', '语文', '滑雪']
	}, {
		title: 'item-2',
		list: ['语文', '代码', '鳄鱼', '滑雪']
	}, {
		title: 'item-3',
		list: ['数学', '语文', '滑雪', '数学', '语文', '代码', '鳄鱼', '滑雪']
	}]
	const [active, setActive] = useState(0)
	// 请求数据
	const getList = () => {
		axios({
			url: '/api/list',
			method: 'post',
			data: {
				isProfect,
				type,
				desc
			}
		}).then(resp => {
			setList(resp.data.data)
		})
	}

	const changeActiveIndex = (i: number, v: string) => {
		setActiveIndex(i)
		setDesc(v)
	}
	const handleFilter = (v: string) => {
		setVisile(false)
		setType(v)
	}

	const colums = [{
		title: '标题',
		dataIndex: 'title',
		key: 'title',
	}, {
		title: '时间',
		dataIndex: 'time',
		key: 'time',
	}, {
		title: '评价数量',
		dataIndex: 'mess',
		key: 'mess',
	}, {
		title: '收藏数量',
		dataIndex: 'collect',
		key: 'collect',
	}, {
		title: '图片',
		dataIndex: 'url',
		key: 'url',
		render(row: any) {
			console.log(row);
			
			return <img src={row}></img>
		}
	},]

	useEffect(() => {
		getList()
	}, [isProfect, desc, type])

	return (
		<>
			<div>
				筛选：<Input type="text" onClick={() => setVisile(true)} value={type} onChange={(e) => setType(e.target.value)} allowClear />
				<div style={{ display: visbile ? 'block' : 'none' }}>
					<div className="title">
						{
							tabs.map((v, i) => {
								return <span className={i === active ? 'active' : ''} key={i} onClick={() => setActive(i)}>{v.title}</span>
							})
						}
					</div>
					<div className="content">
						{
							tabs[active].list.map((v, i) => {
								return <span key={i} onClick={() => handleFilter(v)}>{v}</span>
							})
						}
					</div>
				</div>
			</div>
			<p>
				排序：
				{
					descList.map((v, i) => {
						return <Button key={i} danger={i === activeIndex ? true : false}
							onClick={() => changeActiveIndex(i, v)}
						>{v}</Button>
					})
				}

			</p>
			<p>
				是否精选： <Checkbox onChange={(e) => setIsProfect(e.target.checked)}></Checkbox>
			</p>

			{/* <div className="list" style={{ display: 'flex', flexWrap: 'wrap' }}>
				{
					list.map((v, i) => {
						return (
							<ListItem v={v} key={i}></ListItem>
						)
					})
				}
			</div> */}

			<Table dataSource={list} columns={colums}></Table>
		</>
	)
}


export default App